<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件</title>
  </head>
  <body>
    <!-- <button onclick="fn1();fn2()">按钮</button> -->

    <button>按钮</button>

    <script>
      function fn1() {
        alert('功能1...')
      }
      function fn2() {
        alert('功能2...')
      }
      function fn3() {
        alert('功能3...')
      }
      function fn4() {
        alert('功能4...')
      }
      /* document.querySelector('button').onclick = function () {
        alert('按钮被点击了...')
      } */
      //document.querySelector('button').onclick = fn1
      //解除事件
      //document.querySelector('button').onclick = null

      /* 以上两种方式绑定函数的缺点是无法同时为一个元素绑定两个相同的事件 */
      // 通过事件监听方式来绑定事件
      //第一个参数表示事件类型,注意,需要把前面的on去掉
      //第二个参数表示事件函数
      /*   document.querySelector('button').addEventListener('click', function () {
        alert('功能3...')
      }) */
      document.querySelector('button').addEventListener('click', fn3)
      document.querySelector('button').addEventListener('click', fn4)

      //解除事件
      //注意: 解除事件的参数和绑定时相同
      document.querySelector('button').removeEventListener('click', fn3)
    </script>
  </body>
</html>
